@import "ng-devui/styles-var/devui-var.scss";

.order-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #f7f7fa;
  overflow: hidden;
  .header-wrap{
    height: 8.125vw;
    padding: 0 2.34375vw;
    flex-shrink: 0;
    .main-header{
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .head-title{
        line-height: 2.1875vw;
        font-weight: 700;
        display: flex;
        align-items: center;
         .title-logo {
          width: 4vw;
        }
        .title-line {
          height: 3.28125vw;
          width: .15625vw;
          background: #ccc;
          margin: 0 2.34375vw;
        }
        .title-icon{
          width: 2.1875vw;
          height: 2.1875vw;
          margin-right: .78125vw;
          font-size: 1.9vw;
          font-weight: 700;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $devui-brand;
        }
        .title-text{
          font-size: 2.34375vw;
          font-weight: 600;
          color: $devui-brand;
        }
      }
      .head-user {
        display: flex;
        align-items: center;
        .user-img{
          width: 3.4375vw;
          height: 3.4375vw;
          margin-right: .78125vw;
          border-radius: 50%;
        }
        .user-name{
            font-size: 1.25vw;
            font-weight: 500;
            color: #333;
        }
        .user-depart {
          padding: .3125vw;
          background: $devui-label-bg;
          border-radius: .15625vw;
          border: 1px solid $devui-brand;
          margin-top: .46875vw;
          font-size: .78125vw;
          font-weight: 500;
          color: $devui-brand;
        }
        .user-line{
            width: 1px;
            height: 3.4375vw;
            background: #e8e8e8;
            margin: 0 1.17188vw;
        }
        .user-logout {
          display: flex;
          flex-direction: column;
          align-items: center;
          .logout-img{
              width: 1.875vw;
              height: 1.875vw;

          }
          .logout-text{
            font-size: .9375vw;
            color: #333;
            margin-top: .23438vw;
          }
        }
      }
    }
  }
  .content-wrap{
    height: 0;
    flex-grow: 653;
    padding: 0 1.95313vw;
    display: flex;
    flex-direction: column;
    .content-head{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      height: 4.0625vw;
      .head-tab{
        flex: 1;
        display: flex;
        height: 4.0625vw;
        background: #fff;
        border-radius: 1.17188vw;
        box-sizing: border-box;
        .tab-item {
          height: 100%;
          cursor: pointer;
          margin: 0 1.17188vw;
          font-size: 1.25vw;
          color: #999;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          &.active{
            color: $devui-brand;
            border-bottom: .15625vw solid $devui-brand;
          }
        }
      }
      .head-btn{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 11.875vw;
        height: 4.0625vw;
        background: #f7f7fa;
        border-radius: 1.17188vw;
        border: 1px solid $devui-brand;
        font-size: 1.40625vw;
        font-weight: 500;
        color: $devui-brand;
        margin-left: 1.17188vw;
      }
    }
    .content-items {
      overflow: auto;
      margin: .78125vw 0;
      flex: 1;
      .list-item {
        width: 100%;
        background: #fff;
        margin-top: 2.03125vw;
        position: relative;
        border-radius: 1.17188vw;
         .list-line {
          position: absolute;
          left: 1.5625vw;
          top: -.46875vw;
          width: 12.5vw;
          height: .9375vw;
          border-radius: .78125vw;
          z-index: 12;
          background: #ed572a;
        }
        .list-top {
          padding: 1.95313vw 1.17188vw;
          position: relative;
          border-radius: 1.17188vw 1.17188vw 0 0;
          background: #fff2e8;
          border: .15625vw solid #ed572a;
          box-sizing: border-box;
          .order-info{
            font-size: 1.25vw;
            color: #333;
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .order-info-items{
              display: flex;
              flex-direction: column;
              flex-grow: 1;
              flex-shrink: 1;
              flex-basis: 0%;
              .order-info-items-row{
                display: flex;
                flex-direction: row;
                margin-top: 5px;
                .order-info-item{
                  flex-grow: 1;
                  flex-shrink: 1;
                  flex-basis: 0%;
                }
              }
            }
            .order-status{
              width: 8.1vw;
              color: #ff8620;
              flex-shrink: 0;
              .status-number {
                font-size: 2.1875vw;
                text-align: right;
              }
              .status-label{
                font-size: 1.25vw;
                font-weight: 600;
                margin-top: .3125vw;
                text-align: right;
            }
            }
          }
        }
        .list-bot{
          height: 3.51563vw;
          padding: 0 1.17188vw;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .order-progress{
            display: flex;
            align-items: center;
            .progress-item-title{
              font-size: 1.09375vw;
              color: #333;
            }
            .progress-item-progress{
              width: 7.8125vw;
              margin-left: .78125vw;
            }
          }
        }
      }
    }
  }
  .footer-wrap{
    position: relative;
    z-index: 100;
    background: $devui-brand;
    padding: 0 2.34375vw;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .footer-items{
      display: flex;
      .footer-item{
        position: relative;
        width: 8.125vw;
        height: 4.84375vw;
        font-size: 1.25vw;
        font-weight: 600;
        color: hsla(0, 0%, 100%, .75);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active{
          background:$devui-brand-active;
          color: #fff;
        }
      }
    }
    .footer-time{
      font-size: 1.25vw;
      font-weight: 500;
      color: #fff;
    }
  }
}
.status-start-line{
  background: $devui-info-line!important;
}
.status-start-list{
  background: $devui-info-bg!important;
  border: .15625vw solid $devui-info-line!important;
}
.status-start-color{
  color: $devui-info!important;
}
.status-end-line{
  background: $devui-success-line!important;
}
.status-end-list{
  background: $devui-success-bg!important;
  border: .15625vw solid $devui-success-line!important;
}
.status-end-color{
  color: $devui-success!important;
}
.status-paused-line{
  background: $devui-disabled-text!important;
}
.status-paused-list{
  background: $devui-disabled-bg!important;
  border: .15625vw solid $devui-disabled-line!important;
}
.status-paused-color{
  color: $devui-disabled-text!important;
}
.isPause {
  pointer-events: none;
  position:relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $devui-disabled-bg;
    opacity: 0.7; // 你可以根据需要调整这个值
  }
}
.hege{
  margin-top: 0.78125vw;
}
.overflow-ellipsis{
  position: absolute;
  z-index: 999;
  font-size: .9375vw;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
}
:host ::ng-deep .devui-toast{
  transform: translateX(-50%);
}
